<template>
    <div class="u-p-20">
        <el-card shadow="never">
            <div slot="header">
                <span>
                    <b class="u-f-16">代理用户列表</b>
                </span>
                <div class="u-right u-5mt">
                    <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
                </div>
                <el-button type="danger" size="small" icon="el-icon-plus" class="u-right u-5mt" round @click="addUser()"
                    style="margin-right: 30px;">添加用户</el-button>
            </div>

            <el-form :inline="true" :model="queryForm" size="small" class="u-text-center">
                <el-form-item label="账号状态">
                    <el-select v-model="queryForm.status" clearable>
                        <el-option label="全部" value></el-option>
                        <el-option label="正常" value="1"></el-option>
                        <el-option label="停用" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="queryForm.sex" clearable>
                        <el-option label="全部" value></el-option>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                        <el-option label="保密" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="关键词">
                    <el-input v-model="queryForm.keyword" placeholder="输入昵称、手机查询" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="getPageData(true)">查询</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="tableData" class="u-mt-10">
                <el-table-column label="ID" prop="id" width="60"></el-table-column>
                <el-table-column label="头像">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.head_img" fit="cover" lazy style="width: 48px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="昵称" prop="nick_name"></el-table-column>
                <el-table-column label="手机" prop="phone"></el-table-column>
                <el-table-column label="账号状态">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status==1" type="success">正常</el-tag>
                        <el-tag v-else type="info">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="注册时间" prop="create_time"></el-table-column>
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click.native="clearAgency(scope.row.id)">解除关系</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="u-mt-20 u-text-center">
                <el-pagination background @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
            </div>
        </el-card>
        <el-dialog title="选择用户" :visible.sync="is_user_show" width="60%">
            <Users :isprops="true" :aid="queryForm.agency_id" :isNo="'no'" @user_select="user_select"></Users>
            <span slot="footer" class="dialog-footer">
                <el-button @click="is_user_show = false">取 消</el-button>
                <el-button type="primary" @click="userSelectSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import commonPage from "@/mixins/common-page";
    import Users from "@/views/user/list.vue";
    export default {
        mixins: [commonPage],
        components: {
            Users
        },
        data() {
            return {
                apiName: "user",
                queryForm: {
                    sex: "",
                    status: "",
                    keyword: "",
                    agency_id: ""
                },
                is_user_show: false,
                nick_name: "",
                user_id: 0
            };
        },
        methods: {
            addUser() {
                this.is_user_show = true; //关闭弹框
            },
            clearAgency(id) {
                let self = this;
                this.$confirm("确认解除代理商与用户的关系吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        self.$api[self.apiName].clearAgency(id).then(response => {
                            if (response.code == 1) {
                                self.onLoad();
                            }
                        });
                    })
                    .catch(() => {});
            },
            user_select(row) {
                this.user_id = row.id;
                this.nick_name = row.nick_name;
                this.userSelectSubmit();
            },
            userSelectSubmit() {
                let self = this;
                self.$api[self.apiName]
                    .setAgency(self.queryForm.agency_id, self.user_id)
                    .then(response => {
                        if (response.code == 1) {
                            self.onLoad();
                        }
                    });
                self.is_user_show = false;
            }
        },
        created() {
            if (this.$route.params.page) {
                this.currentPage = this.$route.params.page;
            }
            if (this.$route.params.id) {
                this.queryForm.agency_id = this.$route.params.id + "";
            }
        }
    };
</script>
